<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>page visibility api test</title>
    <script src="lib/visibility.js"></script>
</head>
<body>
<h1>Visibility.js test</h1>
<p>Page Visibility API <strong id="support"></strong>.</p>
<p>Page is visible for <strong id="counter"></strong> sec.</p>
<script>
    var support = document.getElementById('support');
    if ( Visibility.isSupported() ) {
        support.innerHTML = 'is supported';
    } else {
        support.innerHTML = 'isn’t supported';
    }

    document.title = Visibility.state();
    Visibility.change(function (e, state) {
        document.title = state;
    });

    var sec = 0;
    var counter = document.getElementById('counter');
    Visibility.every(1000, function () {
        counter.innerHTML = sec++;
    });
</script>
</body>
</html>
